<template>
	<view class="indexContainer">
		<!-- 头部 -->
		<view class="header">
			<image class="logo" src="/static/images/logo.png" mode=""></image>
			<view class="search">
				<text class="iconfont icon-sousuotianchong"></text>
				<input type="text" value="" placeholder="搜索..." placeholder-class="placeholder" />
			</view>
			<button type="default">张三张三</button>
		</view>
		<!-- 滑块 -->
		<scroll-view class="navscroll" scroll-x="true" enable-flex >
			<view class="navItem" :class="{active:activeIndex==-1}"@click="changeIndex(-1)">
				推荐	</view>
			<view class="navItem" :class="{active:index==activeIndex}" 
				v-for="(item,index) in navList" :key="item.L1Id"
				@click="changeIndex(index,item.L1Id)">{{item.text}}
				</view>
		
		
		</scroll-view>
		
		<!-- 推荐 -->
		<Recommend v-if="activeIndex==-1" :policyDescList='policyDescList' :goodsList='goodsList'></Recommend>
		<!-- 其他导航类项目 -->
		<MenuCate v-else :cateId='cateId'></MenuCate>
	</view>
</template>

<script>
	import base from '@/utils/base.js'
	import request from '@/utils/request.js'
	import { mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				navList: [],
				activeIndex: -1,
				policyDescList:[],
				goodsList:[],
				cateId:'',
			}
		},
		computed:{
			// ...mapState('menu',['navList'])
		},
		onLoad() {

			this.getIndexData()
		},
		methods: {
			...mapMutations('menu',['setNavList']),
			async getIndexData() {
				// let res = await request(base.host + base.indexData)
				let res = await request(base.indexData)
				console.log('首页动态数据---', res);
				//导航仓库
				this.navList = res.indexData.kingKongModule.kingKongList;
				//品牌信息
				console.log(this.navList);
				this.policyDescList=res.indexData.policyDescList
                //推荐界面-好物推荐
				this.goodsList = res.indexData.categoryModule
				//存储仓库vuex
				this.setNavList(res.indexData.kingKongModule.kingKongList)
			},
			changeIndex(index,id) {
				this.activeIndex = index;
				this.cateId=id;
				// console.log('id----',id,this.cateId);
			}
		}
	}
</script>

<style lang="scss">
	.indexContainer {
		.header {
			display: flex;
			padding: 10rpx 5rpx;

			.logo {
				width: 140rpx;
				height: 40rpx;
				margin: 10rpx;
			}

			.search {
				width: 420rpx;
				height: 60rpx;
				background: #f5f5f5;
				position: relative;

				input {
					width: 360rpx;
					height: 60rpx;
					border: 1rpx solid #ccc;
					margin-left: 60rpx; // 重新placeholder 样式

					.placeholder {
						font-size: 26rpx;
						color: #333;
					}
				}

				.iconfont {
					position: absolute;
					font-size: 40rpx;
					left: 10rpx;
					top: 10rpx;
				}
			}

			button {
				width: 144rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 26rpx;
				padding: 0 4rpx;
			}
		}
	}

	.navscroll {
		display: flex; // 不换行
		height: 75rpx;
	   white-space: nowrap;
	   width: 900rpx;
	}

	.navItem {
		display: inline-block;
		height: 40rpx;
		padding: 10rpx;
		font-size: 26rpx;

		&.active {
			color: #BB2C08;
			border-bottom: 3rpx solid #BB2C08;

			.test {
				color: red
			}
		}
	}
</style>